<template>
<div>
  <!-- //:action="uploadUrl" -->
  <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-success="handleSuccess"
        :file-list="fileList"      
        ref="upload"
        :on-remove="handleRemove" multiple>
        <i class="el-icon-plus"></i>
  </el-upload>
  <!-- <button @click.stop.prevent="clear">清空列表</button> -->
</div>
</template>
<script>
  import { uploadUrl } from '@/api/base'
  export default {
      name:"UploadImg",
      props:{
        fileList:{
           type:Array,
           default:function(){
             return []
           }
        }
      },
      data() {
        return {
          uploadUrl,
          //fileList:[],  // 清空作用  上传文件的列表 [{ name:'food.jpg',url:'http://www.baidu.com'}]
        };
      },
      methods: {
        handleSuccess(res,file,fileList){
            console.log('888888',res);
            // 获取 上传成功后的图片的地址 
            let url = res.url.slice(7);
            let imageUrl = 'http://localhost:7788/'+ url;
            //let imageUrl = host + '/' + url;
            //console.log('555','http://localhost:7788/'+url);
            this.$emit('sendImg',imageUrl)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        // 清空图片列表
        clear(){
            //this.fileList = [];
            this.$refs.upload.clearFiles();
        }
      }
    }
  </script>